<ion-header>
  <ion-navbar>
    <ion-grid>
      <ion-row align-items-center>
        <ion-col col-2 (tap)="login()" class="headimg">
          <img menuToggle class="head_img" src="assets/images/head.png">
        </ion-col>
        <ion-col col-8>任务</ion-col>
        <ion-col col-2 (tap)="creat_task()" class="headcreate"><ion-icon name="add"></ion-icon></ion-col>
      </ion-row>
    </ion-grid>
  </ion-navbar>

  <ion-toolbar>
    <ion-grid class="status_nav">
      <ion-row align-items-center>
        <ion-col *ngFor="let category of categories"
                 [class]="dealstatus == category.id ? 'col current' : 'col'"
                 (tap)="switchList(category.value,category.id)">
          <span>{{ category.name }}</span>
          <ion-badge color="danger">{{ category.num }}</ion-badge>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div class="logintext" *ngIf="!token">您还未登录，点我去<span (tap)="login()">登录</span>吧！</div>
  <ion-refresher *ngIf="token !== undefined && token && list!= []" (ionRefresh)="doRefresh($event)" pullMax="400" >
    <ion-refresher-content
      pullingIcon="arrow-round-up"
      pullingText="释放更新"
      refreshingText="加载中..."></ion-refresher-content>
  </ion-refresher>
  <div [ngSwitch]="statuslist">
    <button *ngIf="token !== undefined && token" ion-button block class="filter_btn" (tap)="filterItems($event)">按时间、名字和状态筛选你想要的内容</button>
    <!--待处理-->
    <div *ngSwitchCase="'pending'">
      <ion-list>
        <ion-item-sliding *ngFor="let item of list">
          <ion-item (tap)="goTaskDetail(item.id,item.classname)">
            <em *ngIf="item.state != '已完成'">{{item.level}}</em>
            <ion-avatar item-start>{{item.receiveuser.slice(-2)}}</ion-avatar>
            <h2>{{item.title}}</h2>
            <p><span [class]="item.classname">{{item.state}}</span></p>
            <ion-note item-end>
              <span>{{item.createtime}}</span>
            </ion-note>
          </ion-item>
          <ion-item-options side="right">
            <button *ngIf="item.classname == 'receive_state'" ion-button (tap)="modifyTask(item.state,item.createuser,item.id)">修改</button>
            <button
              *ngIf="item.classname == 'receive_state'"
              ion-button color="secondary"
              (tap)="remindTask(item.state,item.createuser,item.id)">提醒</button>
            <button
              *ngIf="item.classname == 'receive_state'"
              ion-button color="danger"
              (tap)="revokeTask(item.state,item.createuser,item.id)">撤销</button>
          </ion-item-options>
        </ion-item-sliding>
      </ion-list>
      <ion-infinite-scroll *ngIf="token !== undefined && token" (ionInfinite)="doInfinite($event)" threshold="50px">
        <ion-infinite-scroll-content
          loadingSpinner="bubbles"
          loadingText="加载更多内容中...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </div>
    <!--已处理-->
    <div *ngSwitchCase="'handled'">
      <ion-list >
        <ion-item-sliding *ngFor="let item of list">
          <ion-item (tap)="goTaskDetail(item.id,item.classname)">
            <em *ngIf="item.state != '已完成'">{{item.level}}</em>
            <ion-avatar item-start>{{item.receiveuser.slice(-2)}}</ion-avatar>
            <h2>{{item.title}}</h2>
            <p><span [class]="item.classname">{{item.state}}</span></p>
            <ion-note item-end>
              <span>{{item.createtime}}</span>
            </ion-note>
          </ion-item>
          <ion-item-options side="right">
            <button
              *ngIf="item.classname == 'receive_state'"
              ion-button (tap)="modifyTask(item.state,item.createuser,item.id)">修改</button>
            <button
              *ngIf="item.classname == 'receive_state'"
              ion-button color="secondary" (tap)="remindTask(item.state,item.createuser,item.id)">提醒</button>
            <button
              *ngIf="item.classname == 'receive_state'"
              ion-button color="danger" (tap)="revokeTask(item.state,item.createuser,item.id)">撤销</button>
          </ion-item-options>
        </ion-item-sliding>
      </ion-list>
      <ion-infinite-scroll *ngIf="token !== undefined && token" (ionInfinite)="doInfinite($event)" threshold="50px">
        <ion-infinite-scroll-content
          loadingSpinner="bubbles"
          loadingText="加载更多内容中...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </div>
    <!--已完成-->
    <div *ngSwitchCase="'completed'">
      <ion-list>
        <ion-item-sliding *ngFor="let item of list">
          <ion-item (tap)="goTaskDetail(item.id,item.classname)">
            <em *ngIf="item.state != '已完成'">{{item.level}}</em>
            <ion-avatar item-start>{{item.receiveuser.slice(-2)}}</ion-avatar>
            <h2>{{item.title}}</h2>
            <p><span [class]="item.classname">{{item.state}}</span></p>
            <ion-note item-end>
              <span>{{item.createtime}}</span>
            </ion-note>
          </ion-item>
          <!--<ion-item-options side="right"></ion-item-options>-->
        </ion-item-sliding>
      </ion-list>
      <ion-infinite-scroll *ngIf="token !== undefined && token" (ionInfinite)="doInfinite($event)" threshold="50px">
        <ion-infinite-scroll-content
          loadingSpinner="bubbles"
          loadingText="加载更多内容中...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </div>
    <div *ngIf="contentflag"><p style="text-align:center;">暂无任务内容</p></div>
    <div *ngIf="noMoreArticleTip"><p style="text-align:center;">没有更多数据了</p></div>
  </div>
</ion-content>
